import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {InputNumber, NumberRange} from "../../../../packages";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <InputNumber width="200px" v-model={state.formData.age}/> {JSON.stringify(state.formData.age)}
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {
      start: null,
      end: null,
    } as any
  });

  return () => (
    <DemoRow title="NumberRange">
      <NumberRange
        v-model-start={state.formData.start}
        v-model-end={state.formData.end}
      />
      {JSON.stringify(state.formData)}
    </DemoRow>
  );
});
